<template>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="map_trend" style="width: 100%;height:400px;margin-top: 50px" ref="mapTrend"></div>
</template>

<script>
  import echarts from "echarts"
  import axios from 'axios';
  import config from '../../config/config'
  export default {
    name: "TrendMap",
    props: {reportFilter: Object},
    data(){
      return{
        chart:{},
        option:{}
      }
    },
    methods:{
      initEcharts(){//初始化dom
        let dom = this.$refs.mapTrend;
        this.chart=echarts.init(dom);
        // 指定图表的配置项和数据
        this.option = {
          tooltip: {},
          legend: {
            data:["查询量","查询成功", "查询超时","查无记录","查询中","查询失败"]
          },
          xAxis: {
            data:  []
          },
          yAxis: {},
          series:[]
        };
        this.drawEcharts();
      },
      drawEcharts(){//绘制echarts
        this.chart.setOption(this.option);
      },
      query(){
        axios.post(config.api.report.trend, this.reportFilter)
          .then(response => {
            let result = response.data;
            this.option.xAxis.data = result.categories;
            this.option.series = result.datas;
            this.drawEcharts();
          })
          .catch(error => console.log(error))
      }
    },
    mounted(){
      this.initEcharts();
      this.query();
    }
  }
</script>

<style scoped>

</style>
